<template>
	<view class="content">
		<div class="cloud cloud1"></div>
		      <div class="cloud cloud2"></div>
		      <div class="cloud cloud3"></div>
		<view class="bg">
			<text>学风建设系统</text>
		</view>

		<view class="usernameinput" v-if="showbtu==0">
			<input class="inputstyle" placeholder="请输入账号" focus v-model="username" />
		</view>
		<view class="usernameinput" v-if="showbtu==0">
			<input class="inputstyle" placeholder="请输入密码" password="true" focus v-model="password" />
		</view>
		<view style="margin-top: 40rpx;" v-if="showbtu==0">
			<u-button text="账号登录" color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle"
				size="large" customStyle="width: 650rpx" @click="login"></u-button>
		</view>
		<view style="margin-top: 100rpx;" v-if="showbtu==1">
			<u-button text="微信授权登录" color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle"
				size="large" customStyle="width: 650rpx" @click="login"></u-button>
		</view>
		<view style="margin-top: 20rpx;">
			<text style="color: white;">换个登录方式?</text>
			<view @click="showbtu=1" v-if="showbtu==0" style="margin-left: 190rpx;margin-top: -45rpx;">
				<text style="color: #aaffff;margin-left: 30rpx;
					text-decoration-line: underline;" >微信登录</text>
			</view>
			
			<view @click="showbtu=0" v-if="showbtu==1" style="margin-left: 190rpx;margin-top: -45rpx;">
				<text style="color: #aaffff;margin-left: 20rpx;
					text-decoration-line: underline;" >账号登录</text>
			</view>
		</view>
		<view class="aboutus">
			<text>@湖南工学院计算机科学与工程学院建设监控平台</text><br>
			<text>技术支持：计算机科学与工程学院 | 衡阳市源辰信息科技有限公司</text><br>
			<text>地址：湖南省衡阳市珠晖区衡花路18号</text>
		</view>
	</view>
</template>

<script>
	import {
		HNIT_URL
	} from "@/constants/index.js";
	export default {
		data() {
			return {
				username: "18000440216",
				password: "18000440216",
				index: 0,
				showbtu: 0,
				checkboxValue: true,
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style>
	.aboutus{
		color: aliceblue;
		margin-top: 500rpx;
		font-size: 25rpx;
		text-align: center;
	}
	.bg {
		font-weight: bolder;
		font-size: 100rpx;
		margin-top: 400rpx;
		backdrop-filter: blur(10px); /* 设置高斯模糊效果*/
		background-color: rgba(255, 255, 255, 0.9);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		font-family: FZSuXSLSJW;
	}

	.inputstyle {
		text-align: center;
		margin-top: 25rpx;
		margin-left: 30rpx;
		font-size: 40rpx;
		width: 580rpx;
	}

	.usernameinput {
		margin-top: 40rpx;
		width: 640rpx;
		border-radius: 40rpx;
		height: 90rpx;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}

	.title {
		margin-top: 400rpx;
		font-family: FZSuXSLSJW;
		font-size: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	page {
		background: linear-gradient(to top, #55aaff 0%, #120f6d 100%);
		background-size: 100% 200%;
		animation: aurora 10s infinite;
		
	}
	@keyframes aurora {
	  0% {
	    background-position-y: 0;
	  }
	  50% {
	    background-position-y: 100%;
	  }
	  100% {
	    background-position-y: 0;
	  }
	}
	.cloud {
	  position: absolute;
	  width: 200px;
	  height: 100px;
	  background-color: white;
	  border-radius: 50%;
	  opacity: 0.7;
	  animation: moveCloud linear infinite;
	}
	
	.cloud1 {
	  top: 20%;
	  left: -20%;
	  animation-duration: 20s;
	  animation-delay: 0s;
	}
	
	.cloud2 {
	  top: 40%;
	  left: -30%;
	  animation-duration: 25s;
	  animation-delay: 5s;
	}
	
	.cloud3 {
	  top: 60%;
	  left: -40%;
	  animation-duration: 18s;
	  animation-delay: 10s;
	}
	
	@keyframes moveCloud {
	  from {
	    transform: translateX(0%);
	  }
	  to {
	    transform: translateX(120%);
	  }
	}

</style>